<template>
    <div 
        class="texts-box" 
        :class="className"
        :style="{ backgroundColor: data.backgroundColor,  backgroundImage: 'url('+ imgUrl +')'}"
    >
    <!-- {{ data }} -->

        
       <template>
    <LuckyGrid
    ref="LuckDraw"
    width="300px"
    height="300px"
    :prizes="prizes"
    :buttons="buttons"
    :blocks="blocks"
    :default-config="defaultConfig"
    :default-style="defaultStyle"
    :active-style="activeStyle"
    @start="startCallBack"
    @end="endCallBack"
  />
    </template>
    </div>
</template>

<script>
export default {
    name: 'Grid',
    props: ['data', 'className'],
    data() {
        return {
            nowUrl: null,
            luckyNum: 0,
            prizes: [],
            blocks: [
                { padding: '15px', background: '#ffc27a', borderRadius: 28 },
                { padding: '4px', background: '#ff4a4c', borderRadius: 23 },
                { padding: '4px', background: '#ff625b', borderRadius: 20 },
            ],
            defaultConfig: {
                gutter: 5,
                speed: 30
            },
            defaultStyle: {
                borderRadius: 15,
                fontColor: '#DF424B',
                fontSize: '14px',
                textAlign: 'center',
                background: '#fff',
                shadow: '0 5 1 #ebf1f4'
            },
            activeStyle: {
                background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
                shadow: ''
            }
        }
    },
    created() {
        
    },
    computed: {
        imgUrl() {
            if (this.data.data[0]) {
                return this.data.data[0].url;
            }
        },
        buttons () {
            let arr = []
            if (this.data.isTimes === 'a') {
                arr = [{
                    x: 1,
                    y: 1,
                    background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
                    shadow: '0 5 1 #e89b4f',
                    fonts: [
                    { text: `${this.luckyNum} 次`, fontColor: '#fff', top: '73%', fontSize: '11px' },
                    ],
                    imgs: [
                    { src: require('../../assets/img/button.png'), width: '65%', top: '13%' },
                    { src: require('../../assets/img/btn.png'), width: '50%', top: '73%' }
                    ]
                }]
            }else {
                arr = [{
                    x: 1,
                    y: 1,
                    background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
                    shadow: '0 5 1 #e89b4f',
                    imgs: [
                    { src: require('../../assets/img/button.png'), width: '65%', top: '13%' },
                    { src: require('../../assets/img/btn.png'), width: '50%', top: '73%' }
                    ]
                }]
            }
            return arr
        }
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                console.log(newVal)
                for (var i = 0; i < this.prizes.length; i++) {
                    if (newVal.turnArr[i].imgsInfo) {
                        this.prizes[i].imgs[0].src = newVal.turnArr[i].imgsInfo.url
                    }
                    if (newVal.turnArr[i].prizeName) {
                        this.prizes[i].fonts[0].text = newVal.turnArr[i].prizeName
                    }

                }

            },
            deep: true
        }
    },
    mounted() {
        console.log()
        this.getPrizeList()
        setTimeout(() => {
            this.startCallBack()
        },10)
    },
    methods: {
        getPrizeList () {
            // 模拟接口请求奖品列表
            setTimeout(() => {
                const data = [
                    { name: '1元红包', img: require('../../assets/img/0.png') },
                    { name: '100元红包', img: require('../../assets/img/1.png') },
                    { name: '0.5元红包', img: require('../../assets/img/2.png') },
                    { name: '2元红包', img: require('../../assets/img/3.png') },
                    { name: '10元红包', img: require('../../assets/img/4.png') },
                    { name: '50元红包', img: require('../../assets/img/5.png') },
                    { name: '0.3元红包', img: require('../../assets/img/6.png') },
                    { name: '5元红包', img: require('../../assets/img/7.png') }
                ]
                const prizes = []
                this.luckyNum = 3
                let axis = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]]
                for (let i = 0; i < 8; i++) {
                    let item = data[i]
                    prizes.push({
                        index: i, x: axis[i][0], y: axis[i][1],
                        fonts: [{ text: item.name, top: '70%' }],
                        imgs: [{ src: item.img, width: '55%', height: '60%', top: '8%' }]
                    })
                }
                console.log(prizes)
                this.prizes = prizes
            }, 0)
        },
        startCallBack () {
            if (!this.luckyNum) return alert('还剩0次抽奖机会')
            this.$refs.LuckDraw.play()
            setTimeout(() => {
                this.$refs.LuckDraw.stop(Math.random() * 7 >> 0)
            }, 2000)
        },
        endCallBack (prize) {
        // alert(`恭喜你获得大奖: ${prize.fonts[0].text}`)
        this.luckyNum--
        }
    }
}
</script>

<style lang="scss" scoped>
    .texts-box{
        padding: 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .content {
            white-space: pre-wrap;
        }
        div:first-child{
            margin: 0 auto;
        }
    }
</style>